<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>魏远商城</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" href="/favicon.ico">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" href="css/sm.css">
		<link rel="stylesheet" href="css/sm-extend.css">
		<link rel="stylesheet" href="css/ionicons.css">
		<link rel="stylesheet" href="css/creat-address.css">
		<link rel="stylesheet" href="css/mui.min.css">
		<style type="text/css">
			.title {
				top: 0px !important;
			}
			
			.order-back>img {
				margin-top: 10px;
			}
			
			.order-back {
				display: inline-block;
				height: 50px;
				width: 10%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
				text-align: center;
			}
			.picker-items-col{
				width:25%;
				float: left;
			}
			.item-innerMe{
				padding: 0!important;
				height: 2.3rem;
			}
			.addressSel{
				height: 100%;
			}
			.Provinceall, .elRegionall, .elCityall, .streetall{
				width: 33%!important;
				float: left;
				display: inline-block;
				height: 100%;				
				padding-left: 10px;
				box-sizing: border-box;
				position: relative;
				border-right: 1px solid #d8d9db!important;
			}
			.Provinceall>span:before, .elCityall>span:before, .elRegionall>span:before, .streetall>span:before{
				content: '';
				height: 100%;
				display: inline-block;
				vertical-align: middle;
			}
			.Provinceall>span, .elCityall>span, .elRegionall>span, .streetall>span{
				display: inline-block;
				vertical-align: middle;
				height: 100%;
				width: 100%;
			}
			.Province, .elCity, .elRegion, .street{
				position: absolute;
				background-color: #f3f4f6;
				width: 100%;
				max-height: 18rem;
				top: 2.3rem;
				left: 0;
				z-index: 9999;
				border: 1px solid #d8d9db;
				display: none;
				overflow: scroll;
			}
			.list-block .item-inner{
				overflow: visible!important;
			}
			.Province>span, .elCity>span, .elRegion>span, .street>span{
			    height: 30px;
			    text-align: center;
			    width: 100%;
			    border-bottom: 1px solid #d8d9db;
			    display: inline-block;
			    line-height: 30px;
			}
			.elRegionall{
				border-right: none!important;
			}
		</style>
	</head>

	<body>
		<div class="page-group">
			<div class="page page-current">
				<!--标题栏-->
				<header class="bar bar-nav">
					<span class="order-back mui-action-back"><img src="img/back-le.png" height="50%"/></span>
					<!--<a class="button button-link ion-chevron-left pull-left back mui-action-back"></a>-->
					<!--<a class="button button-link iconfont icon-shuaxin1 pull-right"></a>-->
					<h1 class="title">新增收货地址</h1>
				</header>
				<!-- 工具栏 -->
				<button class="bar bar-tab add-addr">
					确认提交
				</button>
				<!--这里是页面内容区域-->
				<div class="content">
					<div class="list-block">
						<ul>
							<li>
								<div class="item-content">
									<div class="item-inner">
										<div class="item-title label">收货人：</div>
										<div class="item-input">
											<input class="creat-name" type="text" placeholder="请输入昵称">
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-inner">
										<div class="item-title label">联系电话：</div>
										<div class="item-input">
											<input class="creat-tel" type="text" maxlength="11" placeholder="请输入电话">
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-inner item-innerMe">
										<div class="item-title label">所在地区：</div>
										<div class="item-input addressSel">
											<div class="Provinceall">
												<span id="SelProvince">请选择省份</span>
												<div class="Province"></div>
											</div>
											<div class="elCityall">
												<span id="SelCity">请选择市</span>
												<div class="elCity"></div>
											</div>
											<div class="elRegionall">
												<span id="SelRegion">请选择区</span>
												<div class="elRegion"></div>
											</div>
										</div>
									</div>
								</div>
							</li>
							<li class="streetli" style="display: none;">
								<div class="item-content">
									<div class="item-inner item-innerMe">
										<div class="item-title label">所在街道：</div>
										<div class="item-input addressSel">
											<div class="streetall">
												<span id="Selstreet">请选择街道</span>
												<div class="street"></div>
											</div>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-inner">
										<div class="item-title label">详细地址：</div>
										<div class="item-input">
											<input id="creat-detail" type="text" placeholder="街道楼牌号">
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="item-content">
									<div class="item-media"><i class="icon icon-form-toggle"></i></div>
									<div class="item-inner default-addr">
										<div class="item-title label">
											<p>设为默认地址</p>
											<p>注：每次下单都会使用该地址</p>
										</div>
										<div class="item-input clearfix">
											<label class="label-switch pull-right">
								                <input type="checkbox">
								                <div class="checkbox"></div>
								            </label>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<!--content end-->
			</div>
		</div>
		<!--<script type="text/javascript" src="js/zepto.js" charset="UTF-8"></script>-->
		<script type="text/javascript" src="js/jquery-3.1.1.min.js" charset="UTF-8"></script>
		<!--<script type="text/javascript" src="js/sm.min.js" charset="UTF-8"></script>-->
		<!--<script type="text/javascript" src="js/sm-extend.min.js" charset="UTF-8"></script>-->
		<!--<script type="text/javascript" src="js/sm-city-picker.min.js" charset="UTF-8"></script>-->
		<script type="text/javascript" src="js/common.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/mui.min.js"></script>
		<!--<script src="js/mui.min.js"></script>-->
		<script type="text/javascript" src="js/url.js"></script>
		<script type="text/javascript">
			$(function() {
				// 选择地址
//				$("#city-picker").cityPicker({
//					toolbarTemplate: '<header class="bar bar-nav">\
//				    <button class="button button-link pull-right close-picker">确定</button>\
//				    <h1 class="title">选择收货地址</h1>\
//				    </header>'
//				});
				// 判断是否默认地址
                
//				$("#SelProvince").picker({
//					  toolbarTemplate: '<header class="bar bar-nav">\
//					  <button class="button button-link pull-right close-picker">确定</button>\
//					  <h1 class="title">请选择省份</h1>\
//					  </header>',
//					  toolbar:true,
//					  onOpen:selProvince(),
////					  onClose:selProvince(),
//					  cols: [
//					    {
//					      textAlign: 'center',
//					      values: parr
//					      //如果你希望显示文案和实际值不同，可以在这里加一个displayValues: [.....]
//					    }
//					  ]
//				});
				
				
//				$("#SelProvince").on('tap',function(){
//					selAddress(0);
//				})
				
				

			});
			
			var tapwhere = '';
			$('#SelProvince').on('tap',function(){				
				$('.street').css('display','none');
				$('.elCity').css('display','none');
				$('.elRegion').css('display','none');				
				tapwhere = 1;
				selAddress(0);
				$('.Province').toggle();
				$('.Province').html('');
			})
			
			$('.Province').on('tap','span',function(event){				
				event.stopPropagation();				
				$('#SelProvince').text($(this).text());
				$('.Provinceall').attr('id',$(this).attr('id'));
				$('.Province').css('display','none');
				$(".elCity").html('');
				tapwhere = 2;
				selAddress($(this).attr('id'));
				$('#SelCity').text('请选择市');
			})
			
			
			$('#SelCity').on('tap',function(){	
				if($('#SelProvince').text()=='请选择省份'){
					mui.toast('请选择省份');
				}else{
					$('.street').css('display','none');
					
					$('.elRegion').css('display','none');
					$('.Province').css('display','none');
					
					$('.elCity').toggle();
				}
			})
			
			$('.elCity').on('tap','span',function(event){				
				event.stopPropagation();				
				$('#SelCity').text($(this).text());
				$('.elCityall').attr('id',$(this).attr('id'));
				$('.elCity').css('display','none');
				$(".elRegion").html('');
				tapwhere = 3;
				selAddress($(this).attr('id'));
				$('#SelRegion').text('请选择区');
			})
			
			
			$('#SelRegion').on('tap',function(){			
				if($('#SelCity').text()=='请选择市'){
					mui.toast('请选择市');
				}else{
					$('.street').css('display','none');
					$('.elCity').css('display','none');
					
					$('.Province').css('display','none');
					
					$('.elRegion').toggle();
				}
			})
			
			$('.elRegion').on('tap','span',function(event){				
				event.stopPropagation();				
				$('#SelRegion').text($(this).text());
				$('.elRegionall').attr('id',$(this).attr('id'));
				$('.elRegion').css('display','none');
				$(".street").html('');
				tapwhere = 4;
				selAddresslast($(this).attr('id'));
				$('.streetli').css('display','none');
				$('#Selstreet').text('请选择街道');
			})
			
			$('#Selstreet').on('tap',function(){			
				if($('#SelRegion').text()=='请选择区'){
					mui.toast('请选择区');
				}else{
					$('.elCity').css('display','none');
					$('.elRegion').css('display','none');
					$('.Province').css('display','none');
					$('.street').toggle();
				}
			})
			
			$('.street').on('tap','span',function(event){				
				event.stopPropagation();				
				$('#Selstreet').text($(this).text());
				$('.streetall').attr('id',$(this).attr('id'));
				$('.street').css('display','none');
				
			})
			
			
			function selAddresslast(parentNo){
//				alert(parentNo);
				$.ajax({
						type: 'post',
						url: ur + '/mobile/getAddress',
						headers: {
							"X-Token": localStorage.token
						},
						data: {
							"jdaddressVO.parentId": parentNo,
						},
						dataType: 'json',
						success: function(data) {
							console.log(data);
							if(data.result.meta.code == 200) {
                                 if(data.result.data.length>0){
                                 	 $('.streetli').css('display','block');
                                 	 for(var i=0;i<data.result.data.length;i++){
	                                 	  var spanh = $('<span id='+data.result.data[i].id+'>'+data.result.data[i].name+'</span>');
	                                 	  if(tapwhere==1){
	                                 	  	$(".Province").append(spanh);
	                                 	  }else if(tapwhere==2){
	                                 	  	$(".elCity").append(spanh);
	                                 	  }else if(tapwhere==3){
	                                 	  	$(".elRegion").append(spanh);
	                                 	  }else if(tapwhere==4){
	                                 	  	$(".street").append(spanh);
	                                 	  }
                                 	  
                                     }
                                 }
                                 
							} else if(data.result.meta.code == 301) {

							}
						},
						error: function(data) {
							console.log(data);
							//						plus.nativeUI.closeWaiting();
						}
					});
			}
			
			
			function selAddress(parentNo){
				
				$.ajax({
						type: 'post',
						url: ur + '/mobile/getAddress',
						headers: {
							"X-Token": localStorage.token
						},
						data: {
							"jdaddressVO.parentId": parentNo,
						},
						dataType: 'json',
						success: function(data) {
							console.log(data);
							if(data.result.meta.code == 200) {
                                 
                                 for(var i=0;i<data.result.data.length;i++){
                                 	  var spanh = $('<span id='+data.result.data[i].id+'>'+data.result.data[i].name+'</span>');
                                 	  if(tapwhere==1){
                                 	  	$(".Province").append(spanh);
                                 	  }else if(tapwhere==2){
                                 	  	$(".elCity").append(spanh);
                                 	  }else if(tapwhere==3){
                                 	  	$(".elRegion").append(spanh);
                                 	  }else if(tapwhere==4){
                                 	  	$(".street").append(spanh);
                                 	  }
                                 	  
                                 }
							} else if(data.result.meta.code == 301) {

							}
						},
						error: function(data) {
							console.log(data);
							//						plus.nativeUI.closeWaiting();
						}
					});
			}
			
			
			
			// 判断是否默认地址
			if($('input[type="checkbox"]').is(':checked')) {
				console.log('ture');
				var defu = 1;
			} else {
				console.log('false');
				var defu = 0;
			}
			$('.add-addr').on('tap', function() {
				addaddress();
			});

			function addaddress() {
				
//				console.log("1");
				var yan = /^1[34578]\d{9}$/;
				console.log($('#creat-detail').val());
				console.log($('#city-picker').val());
				console.log($('.creat-tel').val());
				console.log($('.creat-name').val());
				//             alert('1次');
				if($('input[type="checkbox"]').is(':checked')) {
					console.log('ture');
					var defu = 1;
				} else {
					console.log('false');
					var defu = 0;
				}
				if($('.creat-name').val() == "") {
					mui.alert('联系人姓名不能为空', '提示');
				} else if($('.creat-tel').val() == "") {
					mui.alert('联系人电话不能为空', '提示');
				} else if(!yan.test($('.creat-tel').val())) {
					mui.alert('请输入符合规格的号码', '提示');
				} else if($('#SelProvince').text() == '请选择省份') {
					mui.alert('请选择省份', '提示');
				} else if($('#SelCity').text() == '请选择市') {
					mui.alert('请选择市', '提示');
				} else if($('#SelRegion').text() == '请选择区') {
					mui.alert('请选择区', '提示');
				} else if($('.streetli').css('display') == 'block' && $('#Selstreet').text() == '请选择街道') {
					mui.alert('请选择街道', '提示');
				} else if($('#creat-detail').val() == "") {
					mui.alert('请输入详细地址', '提示');
				} else {			
					var ssqj;
					if($('.streetli').css('display') == 'block'){
					   ssqj = $('#SelProvince').text()+' '+$('#SelCity').text()+' '+$('#SelRegion').text()+' '+$('#Selstreet').text();;					  
					}else if($('.streetli').css('display') == 'none'){
					   ssqj = $('#SelProvince').text()+' '+$('#SelCity').text()+' '+$('#SelRegion').text();					  
					}
					 
					
					$.ajax({
						type: 'post',
						url: ur + '/mobilemember/frontmember/saveAddressByAdd',
						headers: {
							"X-Token": localStorage.token
						},
						/*url:'http://wy.tunnel.bbear.me:8000/wyshop/mobilemember/frontmember/saveAddressByAdd',*/
						data: {
							"addressVO.area": ssqj,
							"addressVO.city": '',
							"addressVO.detail": $('#creat-detail').val(),
							"addressVO.memberId": "",
							"addressVO.phone": $('.creat-tel').val(),
							"addressVO.postCode": '',
							"addressVO.province": '',
							"addressVO.reciver": $('.creat-name').val(),
							"addressVO.tel": '',
							"addressVO.isDefault": defu,
						},
						dataType: 'json',
						success: function(data) {
							console.log(data);
							if(data.result.meta.code == 200) {
								mui.toast('增加成功');
								$('#city-picker').val('');
								$('#creat-detail').val('');
								$('.creat-tel').val('');
								$('.creat-name').val('');
								$('#SelProvince').text('请选择省份');
								$('#SelCity').text('请选择市')
								$('#SelRegion').text('请选择区')
								$('#Selstreet').text('请选择街道')
								mui.back();
								//							 $('.add-addr').on('tap');
								//					var address = plus.webview.getWebviewById('my-address');
								//	                       mui.fire(address,'refreshaddress');		
							} else if(data.result.meta.code == 301) {
								//						 	plus.nativeUI.closeWaiting();
								mui.toast('收货地址不能超过20条');
							}
						},
						error: function(data) {
							console.log(data);
							//						plus.nativeUI.closeWaiting();
						}
					});
				}
			}
		</script>
	</body>

</html>